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terminal / client 
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HTML + CSS + Javascript 
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Front-End 


• HTML-^ 





Javascript - UfF 






HTML 








<div id="header'*> 

<div id="logo"> 

<img src-'/images/logo.png" alt="logo 
</div> 

<div id="nav"> 

<ul> 

<li><a href="#">home</a></li> 
<li><a href="#">about</a></li> 
<li><a h ref="#">contact</a></li> 
</ul> 

</div> 

</div> 

<div id="content"> 

<div class-'banner''> 

something should show here 
</div> 

</div> 

<div id="footer'*> 

<div id="copyright''>copyright</div> 

<div id="social-media"> 
social media 
</div> 

</div> 







<p> content </p 



<a href -'http://www.google.com ">content</a> 



<div id="header"> 

<div id="logo"> 

<img src="/images/logo.png" alt="logo"> 
</div> 

<div id="nav"> 

<ul> 

<li><a href="#">home</a></li> 

<li><a href="#">about</ax/li> 
<li><a h ref="#">contact</a></li> 
</ul> 

</div> 

</div> 


<div id="content"> 

<div class=''banner''> 

something should show here 
</div> 

</div> 

<div id="footer'*> 

<div id="copyright''>copyright</div> 
<div id="social-media"> 
social media 
</div> 

</div> 
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Build With Flexibility in Mind 


THE PERFECT THEME 


^ Learn More 



> 



http://thenneforest.net/item/axes-nnultipurpose- 

onemultioaoe-html-temDlate/l 1437827 



http://deothemes.com/envato/axes//^xes/ 







Fully Responsive 



Featured Works 






http://themeforest.net/item/axes-mu Iti pu rpose- 

onemultipage-html-template/11437827 

http://deothemes.com/envato/axes/Axes/ 











Cere f ealuies 




perfect THEME 


http://thenneforest.net/item/axes-multipurpose- 

onemultipage-html-template/11437827 

http://deothemes.com/envato/axes//^xes/ 
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IB2JISIL ■ 

Painlin{( is just another way of 
keeping a diary' 
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01 JUL Travel lor Smiles in An 

Artistie Wav - Slider 
Gallery Post Example 



ABOUT ME 
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http://thenneforest.net/item/narration-a-responsive 

htmi5-biog-tempiate/11790245 

https://htmi.imithemes.com/narration/ 












<hl>title</hl> 






^ o 


HO«a AIMT ^AlCt fMMATt CONTACT 
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Your Blueberries just got a nem 
color 


Travel lor Smiles in An 


Arlislie Wav - Slider 
Gallery Post Example 


^ ^ I 








— 


. ® P -71 . ^ 

-/ ; - 







0r 


»A 



ABOUT ME 




http://themeforest.net/itenn/narration-a-responsive- 

html5-bloa-template/11790245 


https://html.imithemes.com/narration/ 








<img src="/images/logo 




a 



<a h ref ="about. html">about</a> 

<a href =" mailto:taker.wuffleveryonecanwebsite. com ">En[iall to Taker</a> 
<a href="about.html" target="_blank">about (open in new tab)</a> 



p 



XES 


WE THINK BIG 

We ll Help You to Grow Your Business 




<p> 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident 
beatae, cumque nulla perspiciatis architecto fugiat atque ullam magni 
laboriosam incidunt, porro magnam suscipit, vitae? Nobis. 

</p> 



ul/ol/li 





mr FC«MATt CONTACT 


I’ravel for Smiles in An 
Artistic Wav - Slider 
Gallery Post Example 



Donee vel mauris qiiam. Lorem ipsiim dolor sit amet, consectetur 
adipiscinji clil. Nulla convallis e^estas rhonciis 


ABOUT ME 
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POPULAR POSTS 
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CATEGORIES 


icchnolojjy’ 






<ul> 

<li>Food</li> 
<li>Technology</li> 
<li>Lifestyle</li> 
<li>Photog raphy</li> 
<li>T ravel</li> 

</ul> 
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img 
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common tags 






AXES 


Blog Standard 

















<div> 

header 

</div> 

<div> 

<div> 

page title 
</div> 

<div> 

<div> 

<div> 

post 1 
post 2 
</div> 

<div> 

sidebar 

</div> 

</div> 

</div> 

</div> 
















id 



<div id="header"> 
■ ■ ■ 

</div> 




class 



<div class="classroom"> 

<div class="chair">. . .</div> 

<div class="chair yellow">. . .</div> 

<div class="chair black large">. . .</div> 
<div class="chair blue small">. . .</div> 
</div> 



CART (0) 




TRIPL STITCHED 

CUT. MADE.TRIMMED. LONDON 



HOME 

BUTTON DOWNS 

SPREADS PRINTS ABOUT US 

COLLABORATION 

BLOG 



BUTTON DOWNS 

Our Classic two finger button downs in a selection of Oxfords and rich Italian 

flannels. 

See All 































Italian Flannel Spread Collar - Charcoal Italian Flannel Spread Col ar - Cream Stripe Italian Flannel Spread Collar - Denim 

£ 115.00 £ 115.00 £ 115.00 



@triplstitched 

Instagram 

#\veseepatteni 


worldwide 

Free Delivery 

on all orders 


v 

questions? 

Contact Us 

click here 



SIZING DELIVERY RETURNS CONTACT US LOGIN 


€ COPYRIG-T 2014 TRIPLSTITCHED. MADE BY lYA STUDIO 


SIGN UP 
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Effective email marketing has 
never been this simple. 




MANAGE 


SEND 


OPTIMIZE 
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Work About Contact Blog 





Tom Douglas 

Red Bull 

Aereo 


Boeing Business Jets 

The Bungalow 

Noct Bureau 

Union Binding Co. 

Clarke's Standard 

Hugo Boss 


Core Media Group 

“Rebis “Line Skis 




















































































AXES 


Blog Standard 
















<div> 

header 

</div> 

<div> 

<div> 

page title 
</div> 

<div> 

<div> 

<div> 

post 1 
post 2 
</div> 

<div> 

sidebar 

</div> 

</div> 

</div> 

</div> 




<div id="header"> 

■ ■ ■ 

</div> 

<div id="content"> 

<div id="page-title"> 

■ ■ ■ 

</div> 

<div id="section-wrap"> 

<div class="container"> 

<div class="posts"> 

■ ■ ■ 

</div> 

<div id="sidebar"> 

■ ■ ■ 

</div> 

</div> 

</div> 

</div> 




HTML 





( 






id / class 















} 


margin 

font-s 

color: 





P i 

margin 

font-s 

color: 

} 






} 


margin 

font-s 

color: 






selector 






p { 

background-color: blue; 

} 

#target { 

font-size: 32px; 

} 

.container { 

margin: 0 auto; 

} 




C ^ D E P E N A Save ^ Fork 

* Tidy X 

text from div 
text from p 
text from div 
text from p 
text from div 
text from p 

« Tidy X 

P { 


} 


: yellow; 


a Share O Settings Log In Sign Up 


text from div 
text from p 
text from div 
text from p 
text from div 
text from p 


http://codepen.io/anon/pen/ 

KdKbdY?editors=110 





C ^ D E P E N Save ^ Fork 

O HTML Tidy X 

text from div 

text from p 

icl»"target" text from div 
text from p 
text from div 
text from p 

« CSS Tidy X 

#target { 


} 


: yellow; 


D? Share 


O Settings 


Log In 


Sign Up 


text from div 
text from p 
text from div 
text from p 
text from div 
text from p 



http://codepen.io/anon/pen/ 

MaWZva?editors=110 




C ^ D E P E N A Save ^ Fork 

O HTML 


text from div 


text from p 


class«"highlight'' text from div 


class»"highlight" text from 

text from div 
text from p 


O CSS 

.highlight { 


E Share 

Tidy X 


Tidy X 


} 


: yellow; 


O Settings Log In Sign Up 


text from div 
text from p 



text from p 



httD://codeDen.io/anon/Den/OvJddX? 

editors=110 












,XES 


HOME 


PORTFOLIO 


Blog Standard 



Axes theme is the best. This is standard blog post 


Read More 




#header li { 

background-color: #ccc; 

} 

#nav > ul { 

padding: 4px 12px; 

} 

li. active ~ li { 

font-weight: bold; 

} 

li. active + li { 

color: green; 

} 



Save 


^Fork 


C^DEPEN • 

O HTML Tidy 

id«"header'' 

id-”nav" 


href»"about.php" About 


href-"portfolio.php" Portfolio 


href«"contact.php" Contact 


« CSS 


#header li { 

: inline-block; 


: none; 

• f 



Tidy 


D? Share 


0 Settings 


Log In 


Sign Up 



http://codepen.io/anon/pen/ 
MaWLdV?editors=110 





Save 


^Fork 


C^DEPEN • 

O HTML 

id»" header" 
id-"nav" 


href»"about.php" About 

class-"important" 
href-"portfolio.php" Portfolio 

href-"contact.php" Contact 


o css 

#nav > ul > .important { 

background-color: yellow; 


} 


Share 


O Settings 


Log In 


Sign Up 



About Portfolio Contact 




http://codepen.io/anon/pen/ 

XmWOvx?editors=110 








C ^ D E P E N A Save ^ Fork 

O HTML Tidy x 

text from div 
text from p 

id« ’target " text from div 
text from p 
text from div 
text from p 

O Tidy X 

#target ~ p { 

: yellow; 

} 


DJ Share 


Settings 


Log In 


Sign Up 


text from div 
text from p 
text from div 
text from p 
text from div 
text from p 



http://codepen.io/anon/pen/LpYaYK? 


editors=110 




C ^ D E P E N A Save ^ Fork 

Kt HTML Tidy X 

text from div 

text from p 

id-" target" text from div 
text from p 
text from div 
text from p 

« CSS Tidy X 

#target + p { 

: yellow; 

} 


DJ Share 


O Settings 


Log In 


Sign Up 


text from div 
text from p 
text from div 
text from p 
text from div 
text from p 



http://codepen.io/anon/pen/ 

PPoLwG?editors=110 





common CSS selector 


P 

#target 
.container 
div.container 
#header li 
#header > ul 
.active li 


.active + li 






box model 



margin 
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border 
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padding 5 
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margin / padding 






























margin / padding 
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WHISTLES 


^ I 

m I 



Whistles Instrument 
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■ 


\ i 4 

.^voii^Unl^itc^a^tal a^no 
spcvializii^in straic^\ ucjjjx tcchiv >l< h^n 
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THRU 

YOU 

TOO 




Sweden Un im ted 


Thru You Too 


D'opbox — Guide 










































border 


« HTML 

▼ <di class=''block"> 

Lorem ipsum dolor 
adipisicing elit. 
</aiv> 

▼ <dl class=''block"> 

Lorem ipsum dolor 
adipisicing elit. 
</div> 

-<di class=”block"> 
Lorem ipsum dolor 
adipisicing elit. 
</div> 

-<d-i class=”block"> 
Lorem ipsum dolor 
adipisicing elit. 
</div> 

▼ <di. class="block"> 

Lorem ipsum dolor 
adipisicing elit. 
</div> 


Tidy X 

sit amet, consectetur 
Non, iusto! 


sit amet, consectetur 
Non, iusto! 


sit amet, consectetur 
Non, iusto! 


sit amet, consectetur 
Non, iusto! 


sit amet, consectetur 
Non, iusto! 


O CSS Tidy X 

▼ .block { 

float: left; 
margin-right: 15px; 
margin-bottom: 15px; 
border: 2px solid black; 
padding: 20px; 
width: 150px; 

I_I_I_T_ _ 



http://codepen.io/anon/pen/ 

dYKeMX?editors=110 

























{ 

border-width: px; 
border-style: solid; 
border-color: : 


{ 

border: px solid 


border-style 

https://developer.mozilla.orq/en-US/ 

docs/Web/CSS/border-stvIe 
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« HTML 


Tidy K 


▼<div class="posts"> 

Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Tempore, quod. Vitae 
tenetur blanditiis libero excepturi 
earum dolorum et unde vel. Quaerat quo 
deserunt perferendis non minima 
reprehenderit, dolorem minus libero, 
nostrum obcaecati eius commodi alias 
cupiditate modi expedita eos, 
praesentium ilium repudiandae. 

Excepturi repudiandae, ad amet aperiam. 
Inventore quibusdam sint vitae, sequi 
autem architecto, soluta voluptate 
facilis cum consectetur quo neque 
doloribus voluptas distinctio 
voluptatibus dolorem sapiente tempore 
possimus quos. Quidem pariatur nam 
accusamus asperiores corporis magnam 
debitis modi, sequi facilis, ipsum 
magni quisquam aut, tempora dolor 
aspernatur sapiente quas dignissimos. 
Quasi est sunt tempore autem, aliquam 

• ^aa ■ a _ 

O css Tidy X 

▼ .posts { 

float: left; 
padding: 10px; 
background-color: #ccccff; 
box-sizing: border-box; 

} 

▼ #sidebar { 

float: right; 
padding: 10px; 


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, quod. Vitae tenetur blanditiis libero excepturi earum dolorum et unde vel. Quaerat quo deserunt perferendis non minima 
reprehenderit, dolorem minus libero, nostrum obcaecati eius commodi alias cupiditate modi expedita eos, praesentium ilium repudiandae. Excepturi repudiandae, ad amet aperiam. Inventore 
quibusdam sint vitae, sequi autem architecto, soluta voluptate facilis cum consectetur quo neque doloribus voluptas distinctio voluptatibus dolorem sapiente tempore possimus quos. Quidem 
pariatur nam accusamus asperiores corporis magnam debitis modi, sequi facilis, ipsum magni quisquam aut, tempora dolor aspernatur sapiente quas dignissimos. Quasi est sunt tempore autem, 
aliquam maxime, ilium voluptatem deserunt, esse iste aliquid rerum sit. Consequatur in enim, cum commodi? Eveniet, earum autem totam tenetur dolorum obcaecati at magni nisi ad doloribus 
quisquam veniam enim, et labore, nostrum unde. Repellat, perferendis, accusantium. Quisquam iusto fuga veritatis explicabo exercitationem, delectus amet earum, rerum suscipit, quaerat quos 
dolores distinctio magnam aut hie dicta nisi non consectetur dignissimos molestias. Nisi tempore rem sunt, possimus aspernatur maiores ipsum incidunt facere voluptate expedita reprehenderit 
nemo saepe fugiat explicabo ea! Delectus aspernatur similique, animi deserunt eaque quasi nemo distinctio, accusamus ipsam maxime explicabo ullam est tempora magni, atque minus laudantium 
suscipit temporibus ipsum. Recusandae voluptate, quidem assumenda placeat ratione iste, autem nisi minima. Aliquam corporis quam, aliquid asperiores ratione ipsam in atque pariatur fugit nemo 
aut expedita fugiat voluptate perferendis vel numquam recusandae quisquam doloremque! Laudantium repellat consequuntur cum dolor, quia at maxime, sequi exercitationem architecto aliquam 
voluptate aut labore porro. Dignissimos perferendis, nulla dolores ea officia sapiente, nam molestiae. Placeat modi quod, tempore nihil soluta ipsam quam, at ex voluptatem necessitatibus aut enim 
minus ducimus nesciunt esse. Incidunt at labore nostrum repellendus quas vel hie beatae vero nulla ab eos iste reprehenderit eaque exercitationem animi non commodi voluptate, esse fuga placeat 
impedit a distinctio laborum debitis maiores. Repudiandae possimus earum in velit quasi eaque perferendis ex, quae hie inventore corporis porro iure, amet nemo omnis, eos voluptate quos nihil. 
Dicta nostrum adipisci aspernatur debitis optio amet delectus nihil hie modi deleniti cum, earum ad consectetur dolor neque asperiores itaque, laudantium corrupti voluptate iste reprehenderit esse 
laborum. Ipsa error quaerat labore laudantium neque ilium dolore iure esse voluptates rerum odio animi, dignissimos, minus, sunt quibusdam expedita consectetur veniam doloremque consequatur 
voluptate omnis, voluptatem adipisci. Eveniet consequuntur nesciunt dicta ipsam cumque voluptatum sit sequi veht mollitia nostrum dolor, qui eum possimus quos nam veniam numquam amet at 
sapiente omnis aspernatur! Veritatis aliquam nihil corrupti, impedit magnam obcaecati quaerat vitae, quae ipsam. Hie, placeat officia, necessitatibus neque ratione recusandae quisquam 
voluptatibus sint quae perspiciatis, vero doloribus error. Eius tempore possimus a magni aspernatur reprehenderit rerum atque incidunt soluta delectus. Voluptatem facere optio, rem modi harum 
nesciunt hie sint veritatis magni, consectetur exercitationem animi sit, consequuntur iure enim voluptates qui assumenda officia ullam recusandae repellendus, voluptatibus dolorum cupiditate 
asperiores maiores. Beatae, onrnis reprehenderit amet recusandae eveniet aspernatur, at voluptatibus voluptas a nemo veritatis sit, distinctio rerum nulla? Veniam ipsam, in vero fugiat debitis 
similique enim laudantium est atque! 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, in. Eveniet asperiores neque, porro necessitatibus itaque, vero possimus beatae, dolor dolorum aliquid, aperiam. Odio labore 
expedita obcaecati beatae error illo, voluptas, earum onrnis animi. Minus cum eius dolor similique placeat, blanditiis iusto error obcaecati, unde assumenda, consequuntur quidem. Porro dolorem 
incidunt perspiciatis nisi, iste facere minus cupiditate similique necessitatibus atque doloremque quaerat veritatis aliquam deleniti, tempore eaque quae ullam repudiandae. Natus eum error, quas 
soluta nulla incidunt necessitatibus, praesentium alias iste consequatur laudantium. Dolore accusantium delectus architecto velit, molestias nihil. Nulla asperiores velit esse. Laborum alias 
voluptate accusantium, vero ducimus quaerat ut necessitatibus beatae deleniti suscipit esse possimus consectetur exercitationem quia nesciunt doloribus ipsum illo vitae optio, officiis, totam vel 
expedita eveniet quo et. Odio id optio architecto maiores distinctio molestiae iure beatae dignissimos, amet et suscipit, a voluptas nesciunt accusantium ex consequatur aspernatur sunt at totam. 
Tempore omnis accusamus, nam dolores enim voluptates impedit deleniti ipsum alias molestias reprehenderit. Consequuntur labore iure laboriosam aliquid quasi, minima distinctio ea, error, 
harum fugit pariatur animi et quod perferendis. Voluptate possimus sit cumque debitis eius quod voluptatem dolorem veniam earum fugit nemo sapiente reprehenderit natus ratione, animi 
consequatur ducimus nesciunt, distinctio quaerat. 


http://codepen.io/anon/pen/wKXjMy? 

editors=110 
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width / height 



position 
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Wikipedia 

The Free Encyclopedia 


Article Talk 


HTML 


From Wikipedia, the free encyclopedia 


Create account Log in 


Read View source View history 


Search 


Q 



Main page 
Contents 
Featured content 
Current events 
Random article 
Donate to Wikipedia 
Wikimedia Shop 

Interaction 

Help 

About Wikipedia 
Community portal 
Recent changes 
Contact page 

Tools 

What links here 
Related changes 
Upload file 
Special pages 
Permanent link 
Page information 


For the use of HTML on WikiDedia, see HelD:HTML in wikitext. _ 

HTML or HyperText Markup Language is the standard markup language used to create web pages. 

i-i I ML IS wrinen in tne rorm or i-i i ml eiemenis consisting ot rags encioseo in angie oracKeis \iiKe <ntini> ). 
HTML tags most commonly come in pairs like <hl> and </hl> , although some tags represent empty 
elements and so are unpaired, for example <img> . The first tag in a pair is the start tag, and the second tag is 
the end tag (they are also called opening tags and closing tags). 

A web browser can read HTML files and compose them into visible or audible web pages. The browser does not 
display the HTML tags, but uses them to interpret the content of the page. HTML describes the structure of a 
website semantically along with cues for presentation, making it a markup language rather than a programming 
language. 

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and 
can be used to create interactive forms. It provides a means to create structured documents by denoting 
structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed 
scripts written in languages such as JavaScript which affect the behavior of HTML web pages. 


HTML 

(HyperText Markup Language) 

<!D0CTYPE html> 

<html> 

<!-- created 2010-01-01 -> 
<head> 

<title>sample</title> 

</head> 

<body> 

<p>Voluptatem accusantium 
totam rem aperiam.</p> 
</body> 

</html> 


HTML 


Web browsers can also refer to Cascading Style Sheets (CSS) to define the look and layout of text and other 


Filename 

extension 


material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over 
explicit presentational HTML.f"*^ 


Internet 
media type 


. html , . htm 

text/html 
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Be Inspired 

Browse and shop lysts created by our favorite stores, designers and fashion influencers. 



U 

10 Watches You'll 
Actually Wear Forever 


The ultimate investment piece, the right watch will be 
with you for decades. With that, we've pulled together 
10 watches you'll wear forever from Bremont, Shinola 
and more. 


shop 
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Friday Faves: 16 Stylish 
dweaxsnirxs xor uay xo 
Night 


Who said sweatshirts had to be reserved for a lazy 
weekend? Wear one of these 16 beauties to work (just 
add heels) and you'll be dressed for wherever the 
evening takes you. 


shop 


B Lyst Editor 

tn’s lyst 


















absolute 



relative / absolute / fixed 


absolute 




relative / absolute / fixed 


absolute 




abso ute 


Jenny Nordbera works with Set- and Costume Design for 

Stage Art. 


about 

work 

upcoming 

cv 

press 

contact 

all 




was born in 1982, is originally from 
Stockholm but is currently living in 
Copenhagen 























absolute + body 





was born in 1982, is originaily from 
Stockholm but is currently living in 
Copenhagen 





fixed 



f xed 



Unna sele<;ao dos projetos que ja flz e que five a honra de ter participado. Para saber mais, clique no 

trabaiho que voce deseja conhecer. 





























static 




relative : 


absolute : 

^ S # 8 6^ ^ ffe TL ^ 

position 


fixed : 






float 
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I 

I 

I 

I 

I 

I 




r 


1 


Print Layout 












float = ScM 




Web Layout 


css-tricks.com/all-about-floats/ 








































O HTML 


Tidy X 


<ing class="left" 

src=" http://lorempixel.com/400/200/" alt="image" 

/> 

▼<p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Sunt animi dignissimos 
inventore, voluptatum nemo nulla maxime voluptas 
natus autem quae.</p> 

▼<p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Facere totam, delectus ilium 
ipsum! Sapiente quasi quos magni vitae 
doloremque enim quod autem soluta numquam quis 
aut dolor fugiat eveniet voluptatum id 
repellendus eligendi, reiciendis tenetur totam 
asperiores in. Necessitatibus omnis laboriosom 
optio non quam placeat, doloremque minus hie eum 
unde.</;.> 

<irig src=" http: //lorempixel. com/400/150/" 
alt="photo" class=" right" /> 


'^<p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Cupiditate, at mollitia culpa, 
commodi molestias cumque dignissimos laudantium 


« css 


Tidy X 

- .left { 



float: 

left; 


} 



▼ .right { 



float: 

right; 


} 



« JS 


Tidy X 




• % 


~ < 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 
Sunt animi dignissimos 
inventore, voluptatum nemo 
nulla maxime voluptas natus 
autem quae. 

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 
Facere totam, delectus ilium 
ipsum! Sapiente quasi quos 
magni vitae doloremque enim 

quod autem soluta numquam quis aut dolor fugiat eveniet voluptatum id repellendus eligendi, 
reiciendis tenetur totam asperiores in. Necessitatibus onmis laboriosam optio non quam placeat, 
doloremque minus hie eum unde. 

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 

Cupiditate, at mollitia culpa, 
commodi molestias cumque 
dignissimos laudantium 
assumenda odit aliquam 
officia consequuntur, nostrum 
nam id veniam numquam 
maiores tempora natus vero 
ullam harum repellendus. 

Excepturi totam esse sapiente, perferendis possimus dignissimos adipisci dicta magni 
assumenda at. Quibusdam optio asperiores impedit est reprehenderit ilium deserunt, inventore, 
ex doloremque hie libero ipsum. 




http://codepen.io/anon/pen/ZbxLzq? 

editors=110 

















float & clear 
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float & clear 
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footer is here 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, ex eaque moUitia 
cumque sit sequi quisquam quidem nisi, qui suscipit amet sint harum quo illo. 


http://codepen.io/anon/pen/aaeaGx? 

editors=110 




Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam 
similique vel labore iure obcaecati rem, unde. Officiis tenetur velit 
necessitatibus aliquam dolor impedit? Eaque, asperiores! 


footer is here 


Lorem ipsum 
dolor sit amet, 
consectetur 
adipisicing elit. A 
quae labore, ab 
aperiam animi 
eum! 


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, ex eaque mollitia 
cumque sit sequi quisquam quidem nisi, qui suscipit amet sint harum quo illo. 


http://codepen.io/anon/pen/ 

mexRMm?editors=110 




Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam Lorem ipsum 

similique vel labore iure obcaecati rem, unde. Officiis tenetur velit dolor sit amet, 

necessitatibus aliquam dolor impedit? Eaque, asperiores! consectetur 

footer is here 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, ex 
eaque mollitia cumque sit sequi quisquam quidem nisi, qui suscipit amet 
sint harum quo illo. 

adipisicing elit. A 
quae labore, ab 
aperiam animi 


http://codepen.io/anon/pen/MaVJEx? 

editors=110 






<div id="content"> 

<div id="article"> 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div> 

<div id="sidebar"> 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div> 

<div class-'clearfix"></div> 

</div> 

<div id="footer"> 
footer is here 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div> 




. clearfix { 
clear: both; 

} 



float 


float 

• left 

• right 
clear 

• left 

• right 


both 


+ clear 



box model 


position 


float / clear 




common CSS style 






HTML + CSS 





Lorem ipsum dolor sit amet. 

Lorcm ipsum dolor sit ainct, conscctctur adipisicing clit. Quis hie quia dolorc, ca odit ilium 
libcro in accusamus architccto rcprchcndcrit cvcnicl dcscrunt sint possimus totam. 

image 


https://codepen.io/taker/pen/ 

YGoiwN?editors=1100 
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Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 

Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 

Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 


Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 

Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 

Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 


Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 

Lorcm ipsum dolor sit amct 
conscctctur adipisicing clit. 
Atquc conscquuntur 
possimus quos vitae cos 
sint itaque velit magni 
rcrum facilis, impedit 
rcpcllat voluptatibus 
repudiandae qui? 


I iLipo.//ow^>^^p6^.io/t^k6^/p6^/ 

MEdRqW?editors=1100 


















Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit. Non, 
iusto! 


Lorem ips 
amet, con 
adipisicin 
iusto! 


{ 

width: 200px; 
border: 10px; 
padding: 20px; 


} 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit. Non, 
iusto! 


lor sit 

F 

Non, 


http://codepen.io/anon/pen/ 

NGzMvL?editors=110 















Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 
Non, iusto! 




http://codepen.io/anon/pen/ 

NGzMvL?editors=110 

























margin 20 


20 


20 
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box-sizing 


content-box (default) 
border-box 


https://developer.mozilla.orq/zh-TW/ 

docs/Web/CSS/box-sizinq 






box-sizing: content-box 


1 margin 

1 
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box-sizing: border-box 













J avasc r i pt 

basic 



about coding 



Statements 




Expressions 





y * 2; 




alert( x ); 




K 1^ Elements Console Network 

0 top ▼ Filter 

> X = 32; 
y = X * 2; 
console.log(y); 

64 

undefined 


> 



Default levels ▼ 



VM272:3 






output 


.log( X ); 
alert( x ); 






K Elements Console » • X 

0 top ▼ Filter Default levels ▼ O 

> name = prompt( "what's your name?"); 
console.log(name); 

Taker VM1034:2 

undefined 

> 











operators 




operators 





values & types 


math 

• number (1,2, 3, 4) 
context 

• string (Hello world!) 
decision 


boolean (true/false) 



values & types 


"hello world"; 




comments 




variables 




variables 


var age = ; 

age = "He is " + age + "years old."; 

.log(age); 




b ock 


van iq = 

{ 


} 


iq = iq * ; 

.log(iq); 




block 


var iq = 

■ 

1 

if (iq > 

) { 

iq = iq / ; 

} 

.log(iq); 




conditionals 


var time = ; 

if (time > ) { 

.log ('turn on the light'); 

} 

else { 

.log( ' t urn off the light' ); 

} 




loops 


var amountOfFood = ; 

while (amountOfFood > ) { 

amountOfFood — ; 

} 




loops 


var amountOfFood = ; 

while (amountOfFood > ) { 

} 




loops 


for (van i = 0 ; i < 

.log(i); 



; i++) { 




functions 


function 

van price = price+'.00'; 
return price; 

} 


(price) { 


var priceFormat = translateToPriceFormat( 

.log(priceFormat); 




functions 


function 


} 


van price = price+J 
return price; 



rice) { 


var priceFormat = translateToPriceFormat( 

.log(priceFormat); 




functions 


function 


var price = price+ 
retu 



price) 


} 


price; 


var priceFormat 



nslateToPriceFormat ( 





. log(priceFormat); 




scope 


var a = 1; 

function () 

var a = 5; 
console. log(a); 

} 

doSomeMath(); 
console. log(a); 




scope 


van a = ; 


function 

} 


0 

.log(a); 


doSomeMath(); 

.log(a); 




scope 


function () { 

van a = ; 

.log(a); 

} 


doSomeMath(); 

.log(a); 




more about Javascript 



object 


var obj = { 

hi: "hello world!", 
price: 25, 
isItGood: true, 
cleanYourHouse: functionO { 

console. log( 'clean the house'); 

otherObj: { 

too: 'string a' , 
bar: 'string b' , 

}; 





price 


isThisGood 


"hello world!" 


25 


TRUE 


cleanYourHouse 


otherObj 


functlonO{...} 


{...} 














object 


. log(obj.hi); 

. log(obj.price); 

. log(obj.isItGood); 
obj.cleanYourHouse(); 

. log(obj.otherObj.foo); 
.log(obj.otherObj.bar); 




console. log(obj [ ' 
console. log(obj [ ' 
console. log(obj [ ' 
console. log(obj [ ' 
console. log(obi [ ' 



hi']); 
price ‘ ]); 
isItGood' ]); 
otherObj' ] [ ' too' ] )|; 
otherObi' ][ 'bar' ]); 




array 


van arraySample = [ 


"hello world!", 

/ 

t 


]; 

.log(arraySample[ 

]): 

.log(arraySample[ 

]): 

.log(arraySample[ 

]): 




array 


0 

1 

2 

"hello world!" 

25 

TRUE 









functions as values 


function () { 

console. log( 'foo' ); 

} 

var bar = functionO { 

console. log( 'bar' ); 

}; 


foo(); 
bar(): 




You Don't Know JS 




jQuery 

Javascript library 



jQuery 


Event 

Traversing 


DOM manipulate 



Event 





Traversing 





Traversing 




DOM manipulate 



He o 


How are you 
rm fine thank you 




DOM manipulate 



He o 


How are you 
rm fine thank you 




DOM manipulate 



He o 


How are you 

It’s not your business 

j 




jQuery 



jQuery 




traversing 




jQuery 


<li> 

DOM manipulate 

<li> 



events 



mouse Tip 




ages. HTML elementej SWF^^^m^^ 


This image or video is currently unavailable 




Dieses Folo isl gegenwSrtig nichi verfugbar. 


Esla foio no est^ disponible por el momenio 


Cette photo n'est actuellement pas disponible. 




La foto non ^ attualmente disponibile 


Esta foto nSo est^ disponivei no momenio 


flickr 



















m 5 r it^7. 






► tzEOi?' 







^ 


















scrollO 



>/ 


WORK 















keyboard TgP 



keyboard 


keypress 
keydown 
key up 



Google 


inispam 



Gmail - 


B 







□ 



BJPSM 

□ 



✓ 

1tS3l5HS!lSIStl 

Mm 






✓ 



0 



iisit 

□ 


92A 

□ 
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blur / focus / change 


demo 




submit 



Your stuff, anywhere 


Please enteryour name 


Please enter an email address > 


Please enter a password > 



Please agree to the terms of service. > i_i I agree to Dr i p 


IlI'C'X I HflT 


Sign up 


SiDH in 


demo 

















$(document).readyO 



binding 



event binding 


#header #header li 





bind 


$('#target').bind('click', function(){ 

// ... 

}); 

$('#target '). click(function( ){ 

}); 




bind 


$('#target' ) .bind( 'click' , function(){ 

}); 

$('#target '). click(function( ){ 

}); 







$('#header' ) .on( 'click' , 'li', functionOl 

n ... 

}); 




events 


click / hover / scroll 
keypress / keydown / keyup 
blur / focus / change 
submit 

$(docu ment). readyO 


bind / on 




traversing 



find / children 




$('#content') .find('p' ) 



$( '#posts'). childrenO 



$( '#posts'). children('p* ) 


parent / closest 




$( '#target') .parent( ) 



$('#target') .closest ('#content') 



siblings 




$( '#target') .siblingsO 




$('#target') .siblings('hi' ) 


first / last / eq 



$('#posts').children().first() 
$('#posts').children().last 0 
$('#posts').children().eq(l) 


find / children 


parent / closest 
siblings 


first / last / eq 


traversing 



DOM manipulate 



.appendO 

.prependO 

.beforeO 

.afterO 















after 


prepend 








.htmlO 






html 





html 



htmlO 


${'#target') .html('<li>hello</li>' ); 
van foo = $('#target'). html( ); 



.removeO 

.emptyO 

.cloneO 




remove 


empty 





clone 





O 


delete 






















.addClassO 

.removeClassO 

.toggleClassO 



inispam 


Google 

Gmail - 




[lmap]/Archive (... 
[Imap]/Drafts 
[Mailbox] (1) 
Deleted Messages 
MobileAppsExpre... 
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Mantis 
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.cssO 




About Us 


Planting 


Workflow 


Products 


Wail 


Order 






StoneBei 


About I 
Cape Town 
Soil 

Environment 

Certificate 


Stoneberg Farm dates back to 1892. Located in tbe Piketberg District. At the foot of the Piketberg Mountain under 'Engels 
Man Se Baken'(S 32-41-36.22 E 18-35-05.94) A 1,052 ha farm that Mr. Robert Stone started from the last decade,1997, to 
cutivate olive orchards and rooibos tea. He positioned this farm model for olive production, recreation and education purpose. 

In the early years, we have tried on livestock, watermelon and many vegetables as supplement for the running cost of the 
farm. 


Through many years of personal trip in a long life journey, Mr. Robert Stone got inspired by a wise man showed him the 
much bigger purpose of life. From that destined day after, he think deeply on the meaning of life and the meaning of being a 
human. At last, he realized throughout all industries, farming is one of most fundamental function of a country. Despite how 
advance our technology or how civilize we develop into, agriculture products will always have its position. In the other hand, 
farming itself offers large number of working opportunities if compare to other industry. In this way, job creation is possible and 
will provide a sense of security to the employee. Stoneberg is following the principle of 'take from people and use for people. 

Stoneberg has planted the first olive tree back to the year 2000. Till now, there are 25,860 olive trees stand proudly on the 
land of Stoneberg. It is about 80ha. Stoneberg has its own nursery which are from the cuttings. The target area size is 200ha. 




Our Olive 

All our olive is prepared under traditional procedure. It is through the procedure of hand picking, wash, brine, sanitize and 
into the packaging. 




Olive has several health benefits. Among many mineral, proteins and vitamins, polyphenols serve as strong natural 
antioxidants that boast a host of beneficial effects, such as lowering bad cholesterol (LDL). reduce the risk of blood ar>d heart 
vessel disorder and stop cancer cells from growing. 









cssO 


$(' .bar' ) .css({ 

width: '20px 
left: '500px 

}); 




.propO / .valO 




/ .val 


about . html">about</a> 




prop / .val 


form action="action.php"> 

<input type="text" name="email" value=" j ohn(agmail 
<button>submit</button> 

/form> 


$(' input '). prop( 'value' ); 
$( 'input').valO; 





prop / .val 


$(' input '). prop( 'value' ); 
$(' input '). val( ); 


$(' input '). prop( 'value' , 20); 
$(' input '). val(2<^) ; 
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.dataO 






<ul> 

<li data-id="2028">Lorem ipsum dolor sit amet, consectetur.</li> 

<li data-id="1720">Lorem ipsum dolor sit amet, consectetur .</li> 

<li data-id="9728">Lorem ipsum dolor sit amet, consectetur .</li> 

<li data-id="10231">Lorem ipsum dolor sit amet, consectetur .</li> 
<li data-id="96623">Lorem ipsum dolor sit amet, consectetur .</li> 
</ul> 


var result = $('ul li')-eq(2).data('id'); 
$('ul li').eq(2).data('id', '25'); 



DOM manipulate 

append / prepend / before / after 
html 

remove / empty / clone 

addClass / removeClass / toggleClass 

css 

prop / val 


data 



jQuery 


Event 

Traversing 


DOM manipulate 





todo +create +de ete 


Lorem, ipsum. 

X 

Lorem, ipsum. 

X 

Lorem, ipsum. 

X 

+ todo 




AJAX 








Chrome File Edit View History Bookmarks Window Help 


® O O / QwCYOWT Ideas-Coogle Dc x 


C 1 fi https://docs.google.eom/document/d/lSOfBOY76vFMOyesAYXW-oCZ58PW85Sl_oxpQEi3xTU4/edit 


^ J 


WCYDWT Ideas > 

File Edit View Insert Format Tools Table Help AH changes saved 


^ 1 ^ fi * 7 Normal text : | Vaedaiia 


V 1 




Dan Meyer ▼ 


Comments 


io*b/ua^0 


1 = 


Support Tickets 

• all •• add captions 

• superbaar 

o check the timing on act two of superbear, do the bears fall with the video on the 
scaien 

o tidy up act 2 — cost, calories, etc. 
o measurement info on superbear 

• you pick, I choose 

o add "A" & "B" to you pour, I pick 
o change title to "you pour, I pick’ 

• will it hit the hoop 

o all seven supercut together 
o third act — sujpercut also 

• Jim^ demerits 

o add to three acts — get better video 

• all weydwt 

o add to three acts, lOlqs 
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